iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 13
0
自我挑戰組

重新開始的Vue.js 30day系列 第 14

從頭開始的Javascript 入門 -Event Capture, Propagation, Bubbling Day13

  • 分享至 

  • xImage
  •  

Event Capture, Propagation, Bubbling and Once 筆記

demo


目的

  • 事件監聽
  • 事件捕獲
  • 事件冒泡
  • 單次執行事件

程式碼說明

  let divs = document.querySelectorAll('div');
  let button = document.querySelector('button');
     // e.stopPropagation(); 事件停止冒泡
   //console log 這裡觸發事件順序是 ?? 3>2>1
   //
   //
  // document.body.addEventLister('click',logText);
  // body的值

  divs.forEach(div => div.addEventListener('click', logText {
    once: false, 
    capture: true
    capture true= //事件捕捉模式
    
  })
  )

  // button.addEventListener('click',logText,{
  //   once: true//事件次數只執行一次
  });

  // function logText(e) {
  //   console.log(this.classList.value);
  //   e.stopPropagation();
  // }

addEventListener 語法

document.addEventListener(event, function, useCapture)
event 事件
function 事件觸發後產生的參數
useCapture boolean值,就是true or false,如果送出true的話就是瀏覽器會使用Capture方式,false的話是Bubbling


事件氣泡 event bubbling
事件由外循序啟動 最外層的元件


事件捕捉 event captureing
事件是最外層開始 往內啟動到最具體的元件
此事件流層 不被ie8 或是更早的支援


javascript 說明

[classList] (http://www.zhangxinxu.com/wordpress/2013/07/domtokenlist-html5-dom-classlist-%E7%B1%BB%E5%90%8D/)
class 身上增加div

stopPropagation()
停止事件氣泡或事件捕捉

addEventListener()
方法最後一個參數可允許指定事件觸發方向

true = 事件捕捉
false = 事件氣泡模式


上一篇
從頭開始的Javascript 入門 -ajax day12
下一篇
從頭開始的Javascript 入門 -const let Day13
系列文
重新開始的Vue.js 30day21
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言